﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PelatihanForm.aspx.cs" Inherits="Training.Web.Forms.Administration.Catalog.PelatihanForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>City Form</title>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.validate.wrapper.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.inputmask.bundle.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.msgBox.v1.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/chosen/chosen.jquery.min.js") %>" type="text/javascript"></script>
    <link href="<%= ResolveUrl("~/styles/chosen/chosen.min.css") %>" rel="stylesheet"
        type="text/css" />
    <link type="text/css" rel="stylesheet" href="<%= ResolveUrl("~/styles/ui.jqgrid.css") %>" />
    <script type="text/javascript" src="<%= ResolveUrl("~/scripts/i18n/grid.locale-id.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/scripts/jquery.jqGrid.min.js") %>"></script>
    <script type="text/javascript">

        $("#btnSave").button({ icons: { primary: "ui-icon-disk"} });
        $("#btnClose").button({ icons: { primary: "ui-icon-close"} });

        $('#btnClose').click(function () {

            var handlerUrl = '<%= ResolveUrl("~/ajaxhandler/Transaction/PelatihanDetailHandler.ashx") %>';
            CallAjax(handlerUrl, "?method=clearsession");
            parent.$('#dialog').dialog("close");
            setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);
        });

        $("#btnAddDetail").button({ icons: { primary: "ui-icon-plus"} });
//        $("#btnEditDetail").button({ icons: { primary: "ui-icon-pencil"} });
        $("#btnDeleteDetail").button({ icons: { primary: "ui-icon-trash"} });
 
    </script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('#txtNama').focus();

            $("#txtTgl").datepicker({
                numberOfMonths: 1,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd/mm/yy',
                onSelect: function (selected) {
                   $("#txtTglAkhir").datepicker("option", "minDate", selected)
                }
            });


            $("#txtTglAkhir").datepicker({
                numberOfMonths: 1,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd/mm/yy'
//                ,
//                onSelect: function (selected) {
//                  //  $("#txtTgl").datepicker("option", "minDate", selected)
//                }
            });
          

            // 1. prepare the validation rules and messages.
            var rules = {
                txtNama: "required",
                txtTgl: "required",
                txtTglAkhir: "required",
                txtTempat: "required",
                ddlPembicara: "required"

            };
            var messages = {
                txtNama: "Nama Pelatihan wajib di isi",
                txtTgl: "Tgl Awal Pelatihan wajib di isi",
                txtTglAkhir: "Tgl Akhir Pelatihan wajib di isi",
                txtTempat: "Tempat Pelatihan wajib di isi",
                ddlPembicara: "Pembicara wajib di isi"
            };

            //            $("#txtDescription").inputmask("Regex", { regex: "[A-Za-z-.0-9 ]*" });

            // 2. Initiate the validator
            var validator = new jQueryValidatorWrapper("form1", rules, messages);

            // 3. Set the click event to do the validation
            $("#btnSave").click(function () {

                if (!validator.validate())
                    return;


                var nama = $('#txtNama').val();
                var tgl = $('#txtTgl').val();
                var tglakhir = $('#txtTglAkhir').val();
                var tempat = $('#txtTempat').val();
                var pembicara = $("#ddlPembicara option:selected").val();
                var id = $('#<%= hfID.ClientID %>').val();

                var objrecPelatihan = new Object();
                objrecPelatihan.PelatihanID = id;
                objrecPelatihan.Nama = encodeURIComponent(nama);
                objrecPelatihan.Tgl = encodeURIComponent(tgl);
                objrecPelatihan.TglAkhir = encodeURIComponent(tglakhir);
                objrecPelatihan.Tempat = encodeURIComponent(tempat);
                objrecPelatihan.Pembicara = encodeURIComponent(pembicara);


                jsonData = JSON.stringify(objrecPelatihan);

                var handlerUrl = '<%= ResolveUrl("~/ajaxhandler/administration/catalog/Pelatihanhandler.ashx") %>';

                if (id == 0)
                    CallAjax(handlerUrl, "?method=insert", jsonData);
                else {
                    CallAjax(handlerUrl, "?method=update", jsonData);
                }

                parent.$('#dialog').dialog('close');

                setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);

                return false;
            });


        });
    
    </script>
    <script type="text/javascript">

        function ClearText() {
            $('#txtNama').val('');
            $('#txtTgl').val('');
            $('#txtTempat').val('');
        }
        
         
    </script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#<%= ddlPembicara.ClientID %>').chosen({ placeholder_text_single: "-- pilih pembicara --" });

        });

        $(window).unload(function () {
            alert("Handler for .unload() called.");
        });

    </script>

   

       <script type="text/javascript">

           var handlerUrlDetail = '<%= ResolveUrl("~/AjaxHandler/Transaction/PelatihanDetailHandler.ashx") %>';
           var id = $('#<%= hfID.ClientID %>').val();
           if (id == "")
               id = 0;

           $('#tableDetail').jqGrid({
               url: handlerUrlDetail + '?method=getdata&PelatihanID='+id,
               datatype: 'json',
               colNames: ['ID', 'NIK', 'Nama Peserta', 'Departemen', 'Jabatan','Cabang', 'Lokasi'],
               colModel: [
                { name: 'NIK', key: true, hidden: true, index: 'NIK', width: 60 },
                { name: 'NIK', index: 'Karyawan.NIK', align: 'left', width: 100, searchoptions: { sopt: ['cn', 'eq']} },
                { name: 'NamaKaryawan', index: 'Karyawan.NamaKaryawan', align: 'left', width: 200, searchoptions: { sopt: ['cn', 'eq']} },
                { name: 'Departemen', index: 'Department.DepartmentDesc', align: 'left', width: 400, searchoptions: { sopt: ['cn', 'eq']} },
                { name: 'Jabatan', index: 'Position.PositionName', align: 'left', width: 200, searchoptions: { sopt: ['cn', 'eq']} },
                { name: 'Cabang', index: 'Cabang.NamaCabang', align: 'left', width: 100, searchoptions: { sopt: ['cn', 'eq']} },
                { name: 'Lokasi', index: 'Lokasi.NamaLokasi', align: 'left', width: 100, searchoptions: { sopt: ['cn', 'eq']} }
               

           	],
               //rowNum: 10,
               rownumbers: true,
               id: 'Karyawan.NIK',
               multiselect: true,
               rowList: [5, 10, 15, 20],
               pager: '#pagerDetail',
               sortname: 'Karyawan.NIK',
               sortorder: "asc",
               viewrecords: true,
               jsonReader: { repeatitems: false },
               width: 1000,
               height: '100%',
               caption: 'Peserta',
               ajaxGridOptions: { cache: false }
           });

//           $("#table").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, searchtext: 'Search', refreshtext: 'Refresh' },
//        {}, {}, {}, { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true });

           function OpenFormDetail(ctl) {

               var formUrlDetail = '<%= ResolveUrl("~/forms/Transaction/PelatihanDetailform.aspx") %>';

               var grid = $('#tableDetail');
               var selIds = grid.jqGrid('getGridParam', 'selarrrow'),
                selText = [];
               $.each(selIds, function () {
                   selText.push(grid.jqGrid('getCell', this, 'PesertaID'));
               });


               if (ctl == 'edit') {
                   if (selIds.length == 0) {
                       //alert('Pilih data yang mau di ubah !');
                       $.msgBox("Pilih data yang mau di ubah !", null, { title: "Pesan" });
                   }
                   else if (selIds.length > 1) {
                       // alert('Pilih satu record untuk ubah data.');
                       $.msgBox("Pilih satu record untuk ubah data", null, { title: "Pesan" });
                   }
                   else {
                       $('#dialogDetail').load(formUrlDetail + '?id=' + selText + '&menuId=' + '<%= base.MenuID %>').dialog({ autoOpen: false, modal: true, width: 550, height: 400, title: 'Ubah Peserta' });
                       $("#dialogDetail").dialog('open');
                   }
               }
               else if (ctl == 'adddetail') {
                   $('#dialogDetail').load(formUrlDetail + '?menuId=' + '<%= base.MenuID %>').dialog({ autoOpen: false, modal: true, width: 550, height: 400, title: 'Tambah Peserta' });
                   $("#dialogDetail").dialog('open');
               }
               else {
                   if (selIds.length == 0)
                   //alert('Pilih data yang mau di hapus !');
                       $.msgBox("Pilih data yang mau di hapus !", null, { title: "Pesan" });
                   else {


                       $.msgBox.confirm("Benar data akan di hapus ?", function () {
                           var objPelatihan = new Object();
                           objPelatihan.ID = encodeURIComponent(selText);
                           jsonData = JSON.stringify(objPelatihan);
                           CallAjax('<%= ResolveUrl("~/ajaxhandler/Transaction/PelatihanDetailhandler.ashx") %>', "?method=delete", jsonData);
                           setTimeout("$('#tableDetail').trigger('reloadGrid');", 3000);
                       }, false);
                   }
               }

           }
    
    </script>
</head>
<body onload="ClearText();">
    <form id="form1" runat="server">
    <table border="0">
        <tr>
            <td valign="top">
                Nama Pelatihan
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:TextBox ID="txtNama" MaxLength="100" runat="server" Width="300"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Tgl. Pelatihan
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:TextBox ID="txtTgl" MaxLength="10" runat="server" Width="150"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span> 

                    &nbsp;&nbsp; s.d &nbsp;&nbsp;  <asp:TextBox ID="txtTglAkhir" MaxLength="10" runat="server" Width="150"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Tempat Pelatihan
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:TextBox ID="txtTempat" MaxLength="100" runat="server" Width="300"></asp:TextBox>&nbsp;<span
                    style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td valign="top">
                Pembicara
            </td>
            <td valign="top">
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlPembicara" runat="server" Width="300">
                </asp:DropDownList>
                <span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <%-- <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />--%>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <asp:HiddenField ID="hfID" runat="server" />
            </td>
        </tr>
    </table>
    <div>
        <button id="btnAddDetail" type="button" onclick="OpenFormDetail('adddetail');">
            Tambah</button>
       <%-- <button id="btnEditDetail" type="button" onclick="OpenForm('edit');">
            Ubah</button>--%>
        <button id="btnDeleteDetail" type="button" onclick="OpenFormDetail('deletedetail');">
            Hapus</button>
    </div>
    <div style="overflow: auto;">
        <table id="tableDetail" class="scroll" cellpadding="0" cellspacing="0">
        </table>
        <div id="pagerDetail" class="scroll">
        </div>
        <br />
        <div id="dialogDetail" title="Default dialog">
        </div>
    </div>
    <div style="text-align: right; padding-top: 10px;">
        <button id="btnSave" type="button">
            Save</button>
        <button id="btnClose" type="button">
            Close</button>
    </div>
    </form>
</body>
</html>
